<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link href="http://cdn.bootcss.com/Swiper/3.4.0/css/swiper.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/animate.css/3.2.6/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/shop_details.css">
    <title>商品详情</title>
</head>
<body>
<div class="pageone animated">
    <div class="header" id="header" style="">
        <a class="history" onclick="history.go(-1)" href="##"></a>
        <div class="swiper-container">
            <div class="swiper-wrapper" id="imgsPaly">
                <div class="swiper-slide"> <img src="http://img3.imgtn.bdimg.com/it/u=3851537775,42087300&fm=23&gp=0.jpg" alt=""></div>
                <div class="swiper-slide"> <img src="http://img2.imgtn.bdimg.com/it/u=3267466769,9931587&fm=23&gp=0.jpg" alt=""></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="headerMain animated">
        <div class="showpMian" id="g_name_header_tpl">
            <div class="goodsShowpHeader">
                <ul class="ionc">
                    <li><a href="##"></a></li>
                    <li><a href="##"></a></li>
                    <li><a href="##"></a></li>
                    <li><a href="##"></a></li>
                </ul>
            </div>
            <p class="goodsName">JUST</p>
            <p class="goodsNum">￥ 5268.00</p>
            <div class="showpText">
                <p>送至 全国 <span>有货</span> 免运费</p>
                <p>销量: <span>3件</span></p>
            </div>
        </div>
        <div class="goodsM">
            <ul>
                <li><a href="##">加入购物车</a></li>
                <li class="shop"><a href="##">立即购买</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="page2 animated">
    <div class="goodsShowp goodsFooterShowp" id="g_name_p_html">
        <p class="goodsName">JUST 在线代码格式化 Feedback HTML格式化 XML格式化 CSS格式化 JSON格式化 JavaScript格式化</p>
        <p class="goodsNum">￥ 5268.00</p>
        <div class="showpText">
            <p>送至 全国 <span>有货</span> 免运费</p>
            <p>销量: <span>3件</span></p>
        </div>
    </div>
    <div class="selectNav">
        <ul>

            <li>
                <p class="left">商品评价 <span>好评率100%</span></p>

                <i></i>
                <p class="ofset">5人评价</p>
            </li>
            <li>
                <p>丰享悦家 <span>自营</span></p>
                <i></i>
            </li>
        </ul>
    </div>
    <div class="goodsInfo" id='details-info'>
        <h3>商品详情</h3>
        <div>
            <img src="http://img4.imgtn.bdimg.com/it/u=2751845644,1070042250&fm=23&gp=0.jpg" alt=""/>
        </div>
    </div>
    <div class="goodsInfoText">
        <h3>商品信息</h3>
        <ul>
            <li>商品编号: <span>1632109</span></li>
            <li>价格区间: <span>500以下</span></li>
            <li>商品规格: <span>50ml-100ml</span></li>
            <li>香水香型: <span>淡香</span></li>
        </ul>
    </div>
    <div class="goodsInfo">
        <h3>店铺推荐</h3>
        <ul id='good_list'>

        </ul>
    </div>
    <div class="goodsM">
        <ul>
            <li><a href="##">加入购物车</a></li>
            <li class="shop"><a href="##">立即购买</a></li>
        </ul>
    </div>
</div>
<div class="buy" style="display: none;position: absolute;z-index: 10;top: 0;">
    <div class="buy1">
        <div class="buy_top" id="buy">
            <p class="pic"><img  style="" src="./imgs/yifu.png" alt=""/></p>
            <ul>
                <li style="color: rgb(220,0,0);font-size: 20px">￥17.9</li>
                <li style="font-size: 12px">库存 <span>1245</span> 件</li>
                <li style="font-size: 13px"><lable>已选择</lable>  <span>深灰色 XL</span></li>
            </ul>
        </div>
        <div class="buy_bot">
            <div class="buy_bot_left">
                <p style="margin-top:0">颜色</p>
                <p>尺码</p>
                <p style="margin-top:80px">数量</p>
            </div>
            <ul>
                <li class="li1" style="margin-top:0"> <span class="active">深灰色</span><span>粉红色</span></li>
                <li class='li1'><span class="active">XL</span><span>L</span><span>M</span><br><span style='margin-top:10px'>S</span><span style="margin-top:10px">XS</span></li>
                <li class="lastli"><span style="margin-left:10px" class="jian">-</span><span class="shuliang">1</span><span class="jia">+</span></li>
            </ul>
        </div>
        <div class="queding">
            确定
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="http://cdn.bootcss.com/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.4.0/js/swiper.min.js"></script>
<script src="../js/shop_details_template.js"></script>
<script src="../js/tmpl/shop_details.js"></script>
<script>
    var swiper = new Swiper('.swiper-container');
    function a() {
        $(document).on('touchstart', function (ev) {
            var ev = ev || event;

            var startY = event.changedTouches[0].clientY;
            $(document).on('touchmove', function (ev) {
                var ev = ev || event;

                if (startY - event.changedTouches[0].clientY > 50) {
                    $('.pageone').addClass('zoomOutUp');
                    $('.page2').addClass('zoomInUp').css('display','block')
                    $('.page2').removeClass('zoomOutUp');
                    $('.pageone').removeClass('zoomInUp');
                }
                if (event.changedTouches[0].clientY - startY > 50) {
                    if($(window).scrollTop()==0) {
                        $('.page2').addClass('zoomOutUp');
                        $('.pageone').addClass('zoomInUp').css('display','block');
                        $('.pageone').removeClass('zoomOutUp');
                        $('.page2').removeClass('zoomInUp')
                    }
                }
            });
            $(document).on('touchend', function () {
                $(this).unbind("touchmove");

            });
        });
    }
    a();
    var num=$('.shuliang').html()

    $('.jian').on('click', function () {

        if($('.shuliang').html()<2){
            $('.shuliang').html()==1
        }else{
            $('.shuliang').html(--num);
        }
    })
    $('.jia').on('click', function () {

        if($('.shuliang').html()>999){
            $('.shuliang').html()==10
        }else{
            $('.shuliang').html(++num);
        }
    })
    $('.shop').on('touchstart',function(ev){

        $('.buy').fadeIn(200)
        $('.buy').find('.buy1').animate({
            bottom:0
        },800)
        return false
    })
    $('.li1 span').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
    })

    $('.buy').on('touchstart',function(ev){
        var ev=ev||event;
        ev.stopPropagation()
        $(this).fadeOut(200);
        $(this).find('.buy1').animate({
            bottom:-800,
        },800)

    })

    $('.buy1').on('touchstart',function(ev){
        var ev=ev||event;
        ev.stopPropagation();

    })

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
</script>
</html>